<script setup>
import { ref ,defineEmits} from 'vue';

const newTodo = ref('');

const emit = defineEmits(['add-todo']);
const addTodo = () => {
    if (newTodo.value.trim() === '') {
      alert('你必须输入内容');
      newTodo.value = '';
      return;
    }
      emit('add-todo', { text: newTodo.value });
    //   todos.value.push({ text: newTodo.value });
      newTodo.value = '';
      const inputElement = document.querySelector('.shuru');
      if (inputElement) {
        inputElement.focus(); // 重新聚焦输入框
      }
    
  };
</script>

<template>
    <input 
          type="text" 
          class="shuru" 
          placeholder="输入待办项目后点击回车"
          v-model="newTodo"
          @keyup.enter="addTodo"
          ref="shuru"
        >
</template>

<style>

.shuru {
    height: 50px;
    width: 300px;
    border: 1px gray solid;
    border-radius: 10px;
    position: absolute;
    left: 100px;
    right: 100px;
    top: 50px;
  }

</style>